{include file='header'/}
<body class="pear-admin">
<form class="layui-form" action="/app/admin/dict/add" method="post">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label required">字典名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required|alpha" autocomplete="off"
                           placeholder="请输入英文字母组合" class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">字典值</label>
                <div class="layui-input-block">
                    <table class="layui-table" id="dict-form-table-create">
                        <thead>
                        <tr>
                            <th>标题-name</th>
                            <th width="30%">值-value</th>
                            <th width="65">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td colspan="2">请输入对应的标题和值</td>
                            <td style="text-align: center">
                                <div class="layui-btn-group">
                                    <button type="button" class="layui-btn layui-btn-sm dict-btn-add">新增</button>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-sm" lay-submit=""
                    lay-filter="data-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
</body>
{include file='footer'/}
<script>
  layui.use(["form"], function () {
    var $ = layui.$;
    var form = layui.form;
    form.render();

    form.verify({
      alpha: function (value, elem) {
        if (!/^[A-Za-z0-9_-]+$/.test(value)) {
          //return '只能是字母数字下划线_及破折号-';
        }
      }
    });

    var v_index = 0;
    $('.dict-btn-add').on('click', function () {
      var _fieldId = v_index++;
      var element = $([
        '<tr>',
        '<td><input type="text" name="value[' + _fieldId + '][name]" lay-verify="required" placeholder="标题" autocomplete="off" class="layui-input" value=""></td>',
        '<td><input type="text" name="value[' + _fieldId + '][value]" lay-verify="required" placeholder="值" autocomplete="off" class="layui-input" value=""></td>',
        '<td style="text-align: center">',
        '<button type="button" class="layui-btn layui-btn-danger layui-btn-xs dist-form-add-table-del">删除</button>',
        '</td>',
        '</tr>',
      ].join(''));

      element.find('.dist-form-add-table-del').on('click', function () {
        $(this).parents('tr').remove();
      })

      $('#dict-form-table-create tbody').append(element);
    });

  });
</script>
